<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>中国梦想游 - 乘客信息</title>
    <link rel="stylesheet" type="text/css" href="/home/css/style.min.css?v=3.0.0">
    <link href="/home/fonts/iconfont.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/home/css/ticket_public_v70001.css">
    <!-- 引入Vue.js -->
    <script src="/home/js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入axios -->
    <script src="/home/js/axios.js" type="text/javascript" charset="utf-8"></script>
    <!-- 修改模态框样式部分 -->
    <style>
        /* 模态框基础样式 - 确保居中显示 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            display: none;
            /* 使用flex布局确保居中 */
            display: -webkit-flex; /* Safari */
            display: flex;
            -webkit-justify-content: center; /* Safari */
            justify-content: center;
            -webkit-align-items: center; /* Safari */
            align-items: center;
            /* 确保模态框覆盖整个视口 */
            overflow: hidden;
            /* 修复IE浏览器兼容性 */
            *display: block; /* IE7及以下 */
        }

        /* 默认隐藏模态框 */
        .modal:not(.show) {
            display: none !important;
        }

        /* 显示模态框的类 */
        .modal.show {
            display: flex !important;
        }

        /* 模态框内容 - 修复居中问题 */
        .modal-content {
            background-color: #fff;
            border-radius: 6px;
            width: 550px;
            max-width: 90%;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
            /* 确保内容不会被拉伸 */
            flex-shrink: 0;
            /* 修复IE浏览器兼容性 */
            *position: absolute;
            *top: 50%;
            *left: 50%;
            *transform: translate(-50%, -50%);
            *-webkit-transform: translate(-50%, -50%);
        }

        /* 模态框头部 */
        .modal-header {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 16px;
            font-weight: bold;
            margin: 0;
        }

        .close {
            font-size: 20px;
            cursor: pointer;
            border: none;
            background: none;
            color: #666;
        }

        /* 模态框主体 */
        .modal-body {
            padding: 15px;
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .form-label {
            width: 100px;
            margin-right: 10px;
            text-align: right;
        }

        .form-control,
        .form-select {
            width: 250px;
            padding: 6px 10px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }

        /* 模态框底部 */
        .modal-footer {
            padding: 15px;
            border-top: 1px solid #eee;
            text-align: right;
        }

        .btn {
            padding: 6px 15px;
            margin-left: 10px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .btn-primary {
            background-color: #4CAF50;
            color: white;
        }

        .btn-default {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
<!-- 引入顶部文件 -->
<div id="header"></div>

<!-- 当前位置 -->
<div class="address">
    <div class="wrapper clearfix">
        <a>当前位置：</a>
        <a href="/home/index.html" style="">首页</a><span>></span>
        <a href="/home/center/personal/info.html" class="go">个人中心</a><span>></span>
        <a href="/home/center/passenger/passengers.html" class="go">乘客信息</a>
    </div>
</div>

<!-- 主体内容 -->
<div class="Bott">
    <div class="wrapper" style="width: 1200px; margin: 0 auto;">
        <div class="center-main" style="min-height: 650px; padding: 10px 50px 40px;">
            <div id="js-minHeight">
                <!-- 常用联系人 -->
                <div class="order-panel order-panel-contacts" id="passengerApp">
                    <!-- 移除搜索表单 -->

                    <div class="result-title">
                        <div class="result-list">
                            <a class="btn btn-success" href="javascript:void(0);" @click="openAddModal"><i
                                    class="iconfont"></i>新增乘客</a>
                            <a class="btn btn-danger" href="javascript:void(0);" @click="deleteAnyPassenger"
                               v-if="checkedValues.length > 0"><i class="iconfont"></i>批量删除</a>
                        </div>
                    </div>

                    <!-- 乘客列表 -->
                    <div id="content_list">
                        <div class="order-item">
                            <div class="order-item-bd" style="max-height:100%;">
                                <table class="order-item-table">
                                    <tbody>
                                    <tr>
                                        <th>序号</th>
                                        <th style="min-width: 80px;text-align: center">姓名</th>
                                        <th>证件类型</th>
                                        <th>证件号码</th>
                                        <th>手机／电话</th>
                                        <th>乘客类型</th>
                                        <th style="text-align: center">操作</th>
                                    </tr>

                                    <!-- 使用Vue渲染乘客列表 -->
                                    <tr v-for="(passenger, index) in passengers" :key="passenger.id">
                                        <td style="text-align: center;">
                                            <input type="checkbox" :checked="checkedValues.includes(passenger.id)"
                                                   @change="toggleCheckbox(passenger.id)" style="margin: -3px 0 0;">
                                        </td>
                                        <td class="br-none" style="text-align: center">
                                            <div class="name-yichu">{{ passenger.passenger_name }}</div>
                                        </td>
                                        <td class="br-none">
                                            <div>{{ getCardTypeText(passenger.card_type) }}</div>
                                        </td>
                                        <td class="br-none">
                                            <div>{{ passenger.card_code }}</div>
                                        </td>
                                        <td class="br-none">
                                            <div>(+86){{ passenger.phone }}</div>
                                        </td>
                                        <td class="br-none">
                                            <div>{{ getPassengerTypeText(passenger.passenger_type) }}</div>
                                        </td>

                                        <td class="br-none" style="text-align: center">
                                            <a class="btn btn-success btn-xs" href="javascript:void(0);"
                                               style="min-width: 50px" @click="openEditModal(passenger)"><i
                                                    class="icon-font">编辑</i></a>&nbsp;
                                            <a class="btn btn-danger btn-xs" href="javascript:void(0);"
                                               style="min-width: 50px" @click="deletePassenger(passenger.id)"><i
                                                    class="icon-font">删除</i></a>
                                        </td>
                                    </tr>

                                    <!-- 无数据提示 -->
                                    <tr v-if="passengers.length === 0">
                                        <td colspan="8" style="text-align: center; padding: 20px;">暂无乘客信息</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- 模态框 - 保留在Vue实例内部 -->
                    <div id="passengerModal" class="modal" :class="{show: showModal}">
                        <div class="modal-content">
                            <div class="modal-header">
                                <div class="modal-title">{{ isEditing ? '编辑乘客' : '新增乘客' }}</div>
                                <button type="button" class="close" @click="closeModal">&times;</button>
                            </div>
                            <div class="modal-body">
                                <form @submit.prevent="savePassenger">
                                    <div class="form-group">
                                        <label class="form-label">乘客姓名：</label>
                                        <input type="text" class="form-control" v-model="passengerForm.passenger_name"
                                               required>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">证件类型：</label>
                                        <select class="form-select" v-model="passengerForm.card_type">
                                            <option value="1">身份证</option>
                                            <option value="2">护照</option>
                                            <option value="3">军官证</option>
                                            <option value="4">港澳通行证</option>
                                            <option value="5">台湾通行证</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">证件号码：</label>
                                        <input type="text" class="form-control" v-model="passengerForm.card_code"
                                               required>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">手机号码：</label>
                                        <input type="tel" class="form-control" v-model="passengerForm.phone" required>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">乘客类型：</label>
                                        <select class="form-select" v-model="passengerForm.passenger_type">
                                            <option value="0">成人</option>
                                            <option value="1">儿童</option>
                                            <option value="2">学生</option>
                                            <option value="3">军人</option>
                                        </select>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-default" @click="closeModal">取消</button>
                                <button class="btn btn-primary" @click="savePassenger">{{ isEditing ? '更新' : '保存'
                                    }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="clear: both;"></div>
</div>

<!-- 引入底部footer.html文件 -->
<div id="footer"></div>


<script src="/home/js/config.js"></script>

<!-- 引入jQuery -->
<script src="/home/js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script src="/home/js/public.js" type="text/javascript" charset="utf-8"></script>
<script>
    // 在DOM加载完成后创建Vue实例
    document.addEventListener('DOMContentLoaded', function () {
        // 创建Vue实例
        var app = new Vue({
            el: '#passengerApp',
            data: {
                passengers: [],
                checkedValues: [],
                showModal: false,
                isEditing: false,
                passengerForm: {
                    id: '',
                    passenger_name: '',
                    card_type: '1',
                    card_code: '',
                    phone: '',
                    passenger_type: '0'
                }
            },
            mounted: function () {
                // 加载乘客列表
                this.loadPassengers();
                // 加载头部和底部
                this.loadHeaderFooter();
            },
            methods: {
                // 加载乘客列表
                loadPassengers: function () {
                    var that = this;
                    // 获取当前用户ID
                    var userId = localStorage.getItem('USER_ID') || sessionStorage.getItem('userId');

                    if (!userId) {
                        alert('用户未登录，请先登录');
                        return;
                    }

                    axios.get('/home/passenger/listByUserId', {
                        params: {
                            userId: parseInt(userId)
                        }
                    })
                        .then(function (response) {
                            // 正确处理响应格式 {code: 200, message: "成功", data: [...]}
                            if (response.data && response.data.code === 200 && response.data.data) {
                                // 映射字段名以适配前端模板
                                that.passengers = response.data.data.map(function (passenger) {
                                    return {
                                        id: passenger.passengerId, // 映射passengerId为id
                                        passenger_name: passenger.passengerName, // 映射passengerName为passenger_name
                                        card_type: '1', // 默认为身份证类型
                                        card_code: passenger.idCard, // 映射idCard为card_code
                                        phone: passenger.phone,
                                        passenger_type: passenger.passengerType.toString(), // 转换为字符串类型
                                        status: passenger.status
                                    };
                                });
                            } else {
                                that.passengers = [];
                            }
                        })
                        .catch(function (error) {
                            console.error('获取乘客列表失败:', error);
                            alert('获取乘客列表失败，请稍后重试');
                        });
                },

                // 打开添加乘客模态框
                openAddModal: function () {
                    console.log('打开添加模态框');
                    this.isEditing = false;
                    this.passengerForm = {
                        id: '',
                        passenger_name: '',
                        card_type: '1',
                        card_code: '',
                        phone: '',
                        passenger_type: '0'
                    };
                    this.showModal = true;
                    console.log('showModal设置为:', this.showModal);
                },

                // 打开编辑乘客模态框
                openEditModal: function (passenger) {
                    console.log('打开编辑模态框，乘客信息:', passenger);
                    this.isEditing = true;
                    this.passengerForm = {
                        id: passenger.id,
                        passenger_name: passenger.passenger_name,
                        card_type: passenger.card_type || '1',
                        card_code: passenger.card_code,
                        phone: passenger.phone,
                        passenger_type: passenger.passenger_type || '0'
                    };
                    this.showModal = true;
                    console.log('showModal设置为:', this.showModal);
                },

                // 关闭模态框
                closeModal: function () {
                    console.log('关闭模态框');
                    this.showModal = false;
                    console.log('showModal设置为:', this.showModal);
                },

                // 保存乘客信息（新增或编辑）
                savePassenger: function () {
                    var that = this;
                    var userId = localStorage.getItem('USER_ID') || sessionStorage.getItem('userId');

                    // 准备请求数据
                    var requestData = {
                        passengerName: this.passengerForm.passenger_name,
                        cardType: this.passengerForm.card_type,
                        idCard: this.passengerForm.card_code,
                        phone: this.passengerForm.phone,
                        passengerType: parseInt(this.passengerForm.passenger_type),
                        userId: parseInt(userId)
                    };

                    // 根据是新增还是编辑选择不同的请求
                    var request;
                    if (this.isEditing) {
                        request = axios.put('/home/passenger/update/' + this.passengerForm.id, requestData);
                    } else {
                        request = axios.post('/home/passenger/add', requestData);
                    }
                    request
                        .then(function (response) {
                            if (response.data && response.data.code === 200) {
                                alert(that.isEditing ? '乘客信息更新成功！' : '乘客添加成功！');
                                that.closeModal();
                                that.loadPassengers(); // 重新加载乘客列表
                            } else {
                                alert(that.isEditing ? '乘客信息更新失败:'+ response.data.message : '乘客添加失败！'+ response.data.message);
                            }
                        })
                        .catch(function (error) {
                            console.error(that.isEditing ? '更新乘客失败:'+ error : '添加乘客失败:', error);
                            alert('网络访问失败，请检查网络');
                        });
                },

                // 删除单个乘客
                deletePassenger: function (passenger_id) {
                    if (confirm('确认要删除此乘客吗?')) {
                        var that = this;
                        axios.delete('/home/passenger/delete/' + passenger_id)
                            .then(function (response) {
                                if (response.data) {
                                    alert('乘客删除成功！');
                                    that.loadPassengers();
                                } else {
                                    alert('乘客删除失败！');
                                }
                            })
                            .catch(function (error) {
                                console.error('删除乘客失败:', error);
                                alert('网络访问失败，请检查网络');
                            });
                    }
                },

                // 切换复选框状态
                toggleCheckbox: function (passenger_id) {
                    var index = this.checkedValues.indexOf(passenger_id);
                    if (index > -1) {
                        this.checkedValues.splice(index, 1);
                    } else {
                        this.checkedValues.push(passenger_id);
                    }
                },

                // 批量删除乘客
                deleteAnyPassenger: function () {
                    if (this.checkedValues.length === 0) {
                        alert('请选择要删除的乘客');
                        return;
                    }

                    if (confirm('确认要删除这些乘客吗?')) {
                        var that = this;
                        axios.delete('/home/passenger/deleteAny', {
                            params: {
                                ids: this.checkedValues.join(',')
                            }
                        })
                            .then(function (response) {
                                if (response.data) {
                                    alert('乘客删除成功！');
                                    that.checkedValues = [];
                                    that.loadPassengers();
                                } else {
                                    alert('乘客删除失败！');
                                }
                            })
                            .catch(function (error) {
                                console.error('批量删除乘客失败:', error);
                                alert('网络访问失败，请检查网络');
                            });
                    }
                },

                // 获取证件类型文本
                getCardTypeText: function (type) {
                    var typeMap = {
                        '1': '身份证',
                        '2': '护照',
                        '3': '军官证',
                        '4': '港澳通行证',
                        '5': '台湾通行证'
                    };
                    return typeMap[type] || type;
                },

                // 获取乘客类型文本
                getPassengerTypeText: function (type) {
                    var typeMap = {
                        '0': '成人',  // 匹配后端的0值
                        '1': '儿童',  // 匹配后端的1值
                        '2': '学生',
                        '3': '军人'
                    };
                    return typeMap[type] || type;
                },

                // 加载头部和底部
                loadHeaderFooter: function () {
                    $('#header').load('/home/header.html');
                    // 确保页脚在内容加载完成后再加载
                    setTimeout(function () {
                        $('#footer').load('/home/footer.html');
                    }, 100);
                }
            }
        });
    });
</script>
</body>
</html>

